<style scoped>
    .wraper {
        padding: 0;
        margin-top: -20px;
    }

    .search {
        padding-bottom: 20px;
    }

    .search span {
        color: #68777c;
        font-weight: bold;
        padding-right: 18px;
    }

    .search button {
        background-color: #00a8f7;
        color: #fff;
        margin-left: 8px;
    }

    .top {
        margin-bottom: 20px;
        border-top: 1px dashed #cccccc;
    }

    .detail {
        border-top: 1px dashed #cccccc;
    }

    .wraper .headline {
        position: relative;
        font-size: 12px;
        color: #303134;
        font-weight: bold;
        margin: 10px 0;
        line-height: 32px;
        height: 32px;
    }

    .wraper .add-agent {
        position: absolute;
        top: 0px;
        right: 30px;
        background-color: #348bf2;
        color: #fff;
    }

    .iconfont {
        font-size: 14px;
    }



    /* 分页 start */

    .pagestyle {
        margin: 20px 0;
        float: right;
        padding-right: 15px;
    }


    /* 分页 end */

    .leftside {
        overflow-y: auto;
        border-right: 1px solid #e9eaec;
    }

    .leftside-search {
        padding: 10px;
    }

    .leftside-list {
        overflow-y: auto;
    }

    .leftside-list ul li {
        padding: 10px;
        cursor: pointer;
    }

    .leftside-list ul li:hover {
        background: rgba(64, 116, 225, 0.3);
        color: #4074e1;
        border-right: 4px solid #4074e1;
    }

    .leftside-list ul li:hover a {
        color: #4074e1;
    }

    .leftside-list .active,
    .leftside-list ul li.active:hover {
        background-color: #4074e1;
        color: #fff;
    }

    .leftside-list .active a,
    .leftside-list ul li.active:hover a {
        color: #fff;
    }

    .leftside-listspan {
        max-width: 75%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: bottom;
        color: #000;
    }

    .leftside-edit {
        font-size: 18px;
    }

    .poptip-ul {
        color: #000;
    }

    .leftside-list ul li .poptip-ul li:hover {
        background-color: #4074e1;
        color: #fff;
    }

    .rightside-title {
        padding: 20px;
    }

    .rightside-title h3 {
        display: inline-block;
        font-size: 18px;
        font-weight: normal;
    }

    .title-total {
        font-size: 14px;
        color: #999;
    }

    .fr {
        float: right;
    }

    .rightside-content {
        padding: 5px;
    }

    .line {
        margin-top: 20px;
        margin-bottom: 20px;
        width: 100%;
        height: 1px;
        border-bottom: 1px dotted #dddee1;
        clear: both;
    }

    .center {
        text-align: center
    }

    .xiu {
        margin-top: 15px;
    }
    .mod table,.mod tr,.mod td,.mod th{
        table-layout:fixed;
    empty-cells:show; 
    border-collapse: collapse;
    }
   .mod th,.mod td{
        border: 1px solid #ccc;
        width: 200px;
        text-align: center;
        height: 30px;
        line-height: 30px;
    }
    .mod {
        margin: auto;
        width: 400px;
    }
</style>
<style>
    .salmanage .ivu-form-item {
        margin-bottom: 5px;
    }
</style>

<template>
    <div class="salmanage">
        <product-title></product-title>
        <div class="wraper">
            <Row>
                <Col span="4">
                <div class="leftside">

                    <div class="leftside-list" :style="leftHeight">
                        <ul>
                            <li v-for="(item,index) in ranklist" :key="item.id" :class="active == index ?'active':''" @click="leftActive(index)">
                                <Icon type="document-text"></Icon>
                                <a class="leftside-listspan" href="javascript:;" :title="item.name">{{item.name}}</a>
                            </li>
                        </ul>
                    </div>
                </div>
                </Col>
                <Col span="20">
                <div class="rightside">
                    <!-- <div class="rightside-title">
                                    <h3>{{rightTitle}}晋升考核标准1214</h3>                            
                                    <Button type="primary" shape="circle" icon="plus" class="fr" @click="savecheck(1)">保存考核标准</Button>
                                </div> -->
                    <div class="rightside-content">
                        <Form :model="check" ref="check" :rules="checkruleValidate" :label-width="30" style="padding-top:10px;padding-left:15px;">
                            <div class="xiu">
                                <Button type="primary" @click="addsal">新增</Button>
                                <Button type="primary">修改</Button>
                                <Button type="primary">删除</Button>
                            </div>
                            <div class="xiu">
                                <label for="">
                                    <input type="checkbox">首年度佣金(价值保费*P%)
                                </label>
                            </div>
                            <div class="xiu">
                                <label for="">
                                    <input type="checkbox">续期佣金(续年度保费×同年度销售佣金率)
                                </label>
                            </div>
                            <div class="xiu">
                                <label for="">
                                    <input type="checkbox">伯乐奖（新人每月价值保费×年度奖金率）
                                </label>
                            </div>
                            <div class="xiu">
                                <div style="padding-left:25px;">
                                    伯乐奖奖金率比例如下 :
                                </div>
                                <FormItem class="xiu">
                                    <Row>
                                        <Col span="15">
                                        <Table border ref="selection" :columns="columns3" :data="data3"></Table>
                                        </Col>
                                    </Row>
                                </FormItem>
                            </div>


                            <div class="xiu">
                                <label for="">
                                    <input type="checkbox"> 个人季度奖
                                </label>
                            </div>
                            <div class="xiu">
                                <FormItem class="xiu">
                                    <Row>
                                        <Col span="15">
                                        <Table border ref="selection" :columns="columns1" :data="data1"></Table>
                                        </Col>
                                    </Row>
                                </FormItem>
                            </div>
                            <div class="line"></div>
                        </Form>
                    </div>
                </div>
                <Spin size="large" fix v-if="spinShow"></Spin>
                </Col>
            </Row>
        </div>
        <Modal v-model="showeditModal" :mask-closable='closeable' width="500" title="薪资管理" @on-ok="addcheck()" :loading="loading">
            <Row class="mod">
                <Col span="18" offset="1">
                <table>
                    <tr>
                        <th>#</th>
                        <th>规则名称</th>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox">
                        </td>
                        <td>首年度佣金</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox">
                        </td>
                        <td>续年度佣金</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox">
                        </td>
                        <td>伯乐奖</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox">
                        </td>
                        <td>年终奖</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox">
                        </td>
                        <td>直接育成奖</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox">
                        </td>
                        <td>间接育成奖</td>
                    </tr>
                </table>
                </Col>
            </Row>
        </Modal>
    </div>
</template>

<script>
    import productTitle from '../../components/productTitle'
    import {
        creatBasicLaw,
        getCheck,
        getCheckDate,
        getDetail
    } from '../../api/basiclaw'
    import {
        getRankList
    } from '../../api/rank'

    export default {
        data() {
            return {
                spinShow: false,
                cou: -1,
                active: 0,
                showAddModal: false,
                showeditModal: false,
                closeable: false,
                loading: false,
                leftHeight: {
                    height: '0px'
                },
                rightHeight: {
                    height: '0px'
                },
                dataLeft: [

                ],
                check: {
                    date: '',
                    next_rank_id: '',
                    check: [],
                    type: 2
                },
                check2: {
                    date: '',
                    next_rank_id: '',
                    check: [],
                    type: 2
                },
                checkmodal: {
                    id: '',
                    name: '',
                    symbol: '',
                    param: '',
                    unit: ''
                },
                rightTitle: '',
                roleList: [],
                planb: false,
                planb2: false,
                channelb: false,
                columns0: [{
                        title: '维持考核项目',
                        key: 'name',
                        align: 'center',
                    },
                    {
                        title: '维持考核条件',
                        key: 'symbol',
                        align: 'center',
                    },
                    {
                        title: '维持考核值',
                        key: 'allname',
                        align: 'center',
                    },

                ],
                columns1: [{
                        title: '精英系列人员',
                        key: 'name',
                        align: 'center',
                    },
                    {
                        title: '季度奖金率',
                        key: 'symbol',
                        align: 'center',
                    },
                    {
                        title: '季末个人继续率',
                        key: 'allname',
                        align: 'center',
                    },

                ],
                columns3: [{
                        title: '伯乐奖',
                        key: 'name',
                        align: 'center',
                    },
                    {
                        title: '第一年度',
                        key: 'symbol',
                        align: 'center',
                    },
                    {
                        title: '第二年度',
                        key: 'allname',
                        align: 'center',
                    },
                    {
                        title: '第三年度及以后',
                        key: 'allname',
                        align: 'center',
                    },
                ],
                columns4: [{
                        title: '维持考核项目',
                        key: 'name',
                        align: 'center',
                    },
                    {
                        title: '维持考核条件',
                        key: 'symbol',
                        align: 'center',
                    },
                    {
                        title: '维持考核值',
                        key: 'allname',
                        align: 'center',
                    },
                ],
                data1: [

                ],
                data2: [

                ],
                data3: [

                ],
                data4: [

                ],
                ruleValidate: {
                    id: [{
                        required: true,
                        message: '考核项目不能为空',
                        trigger: 'change'
                    }],
                    symbol: [{
                        required: true,
                        message: '参数符号不能为空',
                        trigger: 'change'
                    }, ],
                    param: [{
                        required: true,
                        message: '参数不能为空',
                        trigger: 'blur'
                    }],
                },
                checkruleValidate: {
                    date: [{
                        required: true,
                        message: '考核周期不能为空',
                        trigger: 'change'
                    }],
                    next_rank_id: [{
                        required: true,
                        message: '降级后职级不能为空',
                        trigger: 'change'
                    }]
                },
                ranklist: [],
                checkdate: [],
                checklist: [],
                symbollist: [],
                checkend: {}
            }
        },
        components: {
            productTitle
        },
        computed: {

            checked: function () {
                let arry = []
                let _data = this.data1
                let _length = _data.length
                if (_length) {
                    for (let i = 0; i < _length; i++) {
                        let _arry = []
                        _arry.push(_data[i].id, _data[i].name, _data[i].className, _data[i].symbol, _data[i].param,
                            _data[i].unit)
                        arry.push(_arry)
                    }
                }
                return arry
            },
            checked2: function () {
                let arry = []
                let _data = this.data2
                let _length = _data.length
                if (_length) {
                    for (let i = 0; i < _length; i++) {
                        let _arry = []
                        _arry.push(_data[i].id, _data[i].name, _data[i].className, _data[i].symbol, _data[i].param,
                            _data[i].unit)
                        arry.push(_arry)
                    }
                }
                return arry
            },
            checked3: function () {
                let arry = []
                let _data = this.data3
                let _length = _data.length
                if (_length) {
                    for (let i = 0; i < _length; i++) {
                        let _arry = []
                        _arry.push(_data[i].id, _data[i].name, _data[i].className, _data[i].symbol, _data[i].param,
                            _data[i].unit)
                        arry.push(_arry)
                    }
                }
                return arry
            },
            checked4: function () {
                let arry = []
                let _data = this.data4
                let _length = _data.length
                if (_length) {
                    for (let i = 0; i < _length; i++) {
                        let _arry = []
                        _arry.push(_data[i].id, _data[i].name, _data[i].className, _data[i].symbol, _data[i].param,
                            _data[i].unit)
                        arry.push(_arry)
                    }
                }
                return arry
            }
        },
        created() {
            let winHeight = screen.availHeight;
            this.leftHeight.height = (winHeight - 280 - 32) + 'px';
            this.spinShow = true
            this.getRankList()
            //this.getCheck()
            this.getCheckDate()
        },
        methods: {
            // 点击显示模态框
            addsal() {
                this.showeditModal = true;
            },

















            addchannelb() {
                this.channelb = !this.channelb
            },
            //保存考核标准
            savecheck(index) {
                if (index == 1) {
                    this.checkend.check = this.checked
                    this.checkend.check_other = this.checked2
                    this.checkend.date = this.check.date
                    this.checkend.next_rank_id = this.check.next_rank_id
                    this.checkend.id = this.check.id
                } else {
                    this.checkend.check = this.checked3
                    this.checkend.check_other = this.checked4
                    this.checkend.next_rank_id = this.check2.next_rank_id
                    this.checkend.date = this.check2.date
                    this.checkend.id = this.check2.id
                }
                this.checkend.type = 2
                this.checkend.rank_id = this.rank_id
                new Promise((resolve, reject) => {
                    creatBasicLaw(this.checkend).then(response => {
                        //console.log(response.data)
                        if (response.data.err == 0) {
                            // this.$Message.success(response.data.info);
                        } else {
                            // this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });


            },
            getDetail() {
                let _param = {
                    rank_id: this.rank_id,
                    type: 2
                }
                new Promise((resolve, reject) => {
                    getDetail(_param).then(response => {
                        if (response.data.err == 0) {
                            this.spinShow = false
                            let _length = response.data.data.length
                            if (response.data.data.id) {
                                this.check = response.data.data
                            } else {
                                this.check = {
                                    date: '',
                                    next_rank_id: '',
                                    check: [],
                                    type: 2
                                }
                            }
                            if (response.data.data.check && response.data.data.check.length > 0) {
                                for (var i = 0; i < response.data.data.check.length; i++) {
                                    var _obj = {}
                                    _obj.id = response.data.data.check[i][0]
                                    _obj.name = response.data.data.check[i][1]
                                    _obj.className = response.data.data.check[i][2]
                                    _obj.symbol = response.data.data.check[i][3]
                                    _obj.param = response.data.data.check[i][4]
                                    _obj.unit = response.data.data.check[i][5]
                                    _obj.allname = response.data.data.check[i][4] + response.data.data.check[
                                        i][5]
                                    this.data1.push(_obj)
                                }
                            } else {
                                this.data1 = []
                            }
                        } else {
                            this.spinShow = false
                            // this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            //添加第二类考核
            addplan() {
                this.planb = !this.planb
            },
            addplanb() {
                this.planb2 = !this.planb2
            },
            //考核项目change
            checkIdChange(item) {
                let index = item.value
                let label = item.label
                this.checkmodal.name = label
                if (index) {
                    this.checkmodal.unit = this.checklist[index].unit
                    this.symbollist = this.checklist[index].symbol
                    this.checkmodal.className = this.checklist[index].className
                } else {
                    this.checkmodal.unit = ''
                    this.symbollist = []
                    this.checkmodal.className = ''
                }

            },
            //获取考核周期
            getCheckDate() {
                new Promise((resolve, reject) => {
                    getCheckDate().then(response => {
                        console.log(response.data)
                        if (response.data.err == 0) {
                            this.checkdate = response.data.data
                        } else {
                            this.$Message.error(response.data.info);

                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            //添加考核项
            addcheck() {
                this.$refs['checkmodal'].validate((valid) => {
                    if (valid) {
                        this.checkmodal.allname = this.checkmodal.param + this.checkmodal.unit
                        let _obj = Object.assign({}, this.checkmodal)
                        if (this.cou < 0) {
                            this.data1.push(_obj)
                        } else if (this.cou == 2) {
                            this.data2.push(_obj)
                        } else if (this.cou == 3) {
                            this.data3.push(_obj)
                        } else if (this.cou == 4) {
                            this.data4.push(_obj)
                        }

                        this.showeditModal = false
                        this.$refs['checkmodal'].resetFields()
                    } else {
                        // 通过loading来阻止modal隐藏，然后手动修改loading来充值确定按钮
                        setTimeout(() => {
                            this.loading = false;
                            this.$nextTick(() => {
                                this.loading = true;
                            });
                        }, 2000);
                    }
                })
            },
            //获取全部考核项目的参数
            getCheck() {
                new Promise((resolve, reject) => {
                    getCheck().then(response => {
                        if (response.data.err == 0) {
                            this.checklist = response.data.data
                        } else {
                            this.$Message.error(response.data.info);

                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            getRankList() {
                new Promise((resolve, reject) => {
                    getRankList().then(response => {
                        if (response.data.err == 0) {
                            this.ranklist = response.data.data
                            this.rank_id = this.ranklist[0].id
                            this.rightTitle = this.ranklist[0].name
                            this.getDetail()
                        } else {
                            this.$Message.error(response.data.info);

                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            addcheckbtn() {
                this.showeditModal = true
                this.cou = -1
            },
            addcheckbtn2() {
                this.showeditModal = true
                this.cou = 2
            },
            addcheckbtn3() {
                this.showeditModal = true
                this.cou = 3
            },
            addcheckbtn4() {
                this.showeditModal = true
                this.cou = 4
            },
            remove(index) {
                this.$Modal.confirm({
                    title: '提示',
                    content: '是否要删除该条记录?',
                    onOk: () => {
                        this.data1.splice(index, 1);
                    },
                });
            },
            remove2(index) {
                this.$Modal.confirm({
                    title: '提示',
                    content: '是否要删除该条记录?',
                    onOk: () => {
                        this.data2.splice(index, 1);
                    },
                });
            },
            remove3(index) {
                this.$Modal.confirm({
                    title: '提示',
                    content: '是否要删除该条记录?',
                    onOk: () => {
                        this.data3.splice(index, 1);
                    },
                });
            },
            remove4(index) {
                this.$Modal.confirm({
                    title: '提示',
                    content: '是否要删除该条记录?',
                    onOk: () => {
                        this.data4.splice(index, 1);
                    },
                });
            },
            leftActive(index) {
                this.active = index
                this.spinShow = true
                this.rightTitle = this.ranklist[index].name
                this.rank_id = this.ranklist[index].id
                this.data1 = []
                this.data2 = []
                this.data3 = []
                this.data4 = []
                this.check = {
                        date: '',
                        next_rank_id: '',
                        check: [],
                        type: 2
                    },
                    this.check2 = {
                        date: '',
                        next_rank_id: '',
                        check: [],
                        type: 2
                    },
                    this.getDetail()
                this.planb = false
                this.planb2 = false
                this.channelb = false
            }
        }
    }
</script>